<template>
  <button
    class="moe-button"
    :class="[
      type ? `moe-button--${type}` : '',
      size ? `moe-button--${size}` : '',
      {
        'moe-button--disabled': disabled,
        'moe-button--loading': loading,
        'moe-button--round': round,
        'moe-button--circle': circle
      }
    ]"
    :disabled="disabled || loading"
    @click="handleClick"
  >
    <template v-if="loading">
              <i class="fas fa-spinner fa-spin moe-button__loading"></i>
    </template>
    <slot v-else></slot>
  </button>
</template>

<script setup>
import { defineProps, emit } from 'vue';
import { useThemeStore } from '@/stores/theme';
import { storeToRefs } from 'pinia';

// 定义组件属性
const props = defineProps({
  /**
   * 按钮类型
   * @values primary, secondary, success, warning, error, info, text
   */
  type: {
    type: String,
    default: 'primary'
  },
  /**
   * 按钮大小
   * @values small, medium, large
   */
  size: {
    type: String,
    default: 'medium'
  },
  /**
   * 是否禁用
   */
  disabled: {
    type: Boolean,
    default: false
  },
  /**
   * 是否加载中
   */
  loading: {
    type: Boolean,
    default: false
  },
  /**
   * 是否圆角
   */
  round: {
    type: Boolean,
    default: false
  },
  /**
   * 是否圆形
   */
  circle: {
    type: Boolean,
    default: false
  }
});

// 定义事件
const emits = emit('click');

// 点击事件处理
const handleClick = () => {
  emits('click');
};

// 使用主题store
// const themeStore = useThemeStore();
// const { themeVariables } = storeToRefs(themeStore);
</script>

<style scoped lang="scss">
@import '@/styles/variables.scss';

.moe-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: $font-weight-medium;
  border-radius: $border-radius-md;
  transition: all $transition-normal;
  cursor: pointer;
  box-sizing: border-box;

  // 尺寸样式
  &--small {
    padding: $spacing-1 $spacing-3;
    font-size: $font-size-sm;
    height: 32px;
  }

  &--medium {
    padding: $spacing-2 $spacing-4;
    font-size: $font-size-md;
    height: 40px;
  }

  &--large {
    padding: $spacing-3 $spacing-6;
    font-size: $font-size-lg;
    height: 48px;
  }

  // 类型样式
  &--primary {
    background-color: $primary-color;
    color: white;

    &:hover:not(:disabled) {
      background-color: $primary-dark;
    }
  }

  &--secondary {
    background-color: $secondary-color;
    color: white;

    &:hover:not(:disabled) {
      background-color: $secondary-dark;
    }
  }

  &--success {
    background-color: $success-color;
    color: white;

    &:hover:not(:disabled) {
      background-color: darken($success-color, 10%);
    }
  }

  &--warning {
    background-color: $warning-color;
    color: white;

    &:hover:not(:disabled) {
      background-color: darken($warning-color, 10%);
    }
  }

  &--error {
    background-color: $error-color;
    color: white;

    &:hover:not(:disabled) {
      background-color: darken($error-color, 10%);
    }
  }

  &--info {
    background-color: $info-color;
    color: white;

    &:hover:not(:disabled) {
      background-color: darken($info-color, 10%);
    }
  }

  &--text {
    background-color: transparent;
    color: $primary-text;

    &:hover:not(:disabled) {
      background-color: $neutral-100;
    }
  }

  // 状态样式
  &--disabled {
    opacity: $uni-opacity-disabled;
    cursor: not-allowed;
  }

  &--loading {
    cursor: wait;
  }

  &--round {
    border-radius: $border-radius-full;
  }

  &--circle {
    border-radius: 50%;
    padding: 0;
    width: 40px;
    height: 40px;

    &.moe-button--small {
      width: 32px;
      height: 32px;
    }

    &.moe-button--large {
      width: 48px;
      height: 48px;
    }
  }

  // 加载图标
  &__loading {
    animation: spin 1s linear infinite;
  }

  @keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
  }
}
</style>